<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="first-container">
      <el-header class="header">
        <title-header :data="data.titleDate" :text2="data.text2" :text1="$t('iot.iotRealTime')"></title-header>
      </el-header>
      <el-container class="second-container">
        <div class="table-list1">
          <el-table border :data="data.tablesList" :fit="true" table-layout="fixed" header-align="center" stripe
                    highlight-current-row
                    style="flex: 1" @row-click="handlRowClick"
                    :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                    :cell-style="{textAlign:'center'}">
            <el-table-column prop="ProcessName" :label="$t('iot.processName')"/>
            <el-table-column prop="ProductionLineName" :label="$t('mes.productionlineName')"/>
            <el-table-column prop="LocationName" :label="$t('iot.pointName')"/>
            <el-table-column prop="CreationTime" :label="$t('wms.timPeriod')"/>
            <el-table-column prop="DataStatus" :label="$t('wms.firstStatus')">
              <template #default="scope">
                <el-tag effect="dark"
                        :type="scope.row.DataStatus=='正常'? 'success': 'danger'"
                        size="large"
                        style="width:80px">
                  {{ scope.row.DataStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="TodayTotalQty" :label="$t('iot.cumulativeToday')">
              <template #default="scope">
                <el-tag effect="dark" size="large"
                        style="width:80px;font-weight: 600;font-size: 15px;padding: 0 10px">{{
                    scope.row.TodayTotalQty
                  }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="TodayAbnormalCount" :label="$t('iot.todayAnomaly')">
              <template #default="scope">
                <el-tag  size="large" :type="scope.row.TodayAbnormalCount>0?'danger':''"
                        style="width:80px;font-weight: 600;font-size: 15px;padding: 0 10px">{{
                    scope.row.TodayAbnormalCount
                  }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--第二个表格-->
        <div class="table-list2">
          <div class="table2">
            <el-table border :data="data.tablesList2" :fit="true" table-layout="fixed" header-align="center" stripe
                      style="height: 100%;" row-key="DataStatus"
                      :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                      :cell-style="{textAlign:'center'}">
              <el-table-column prop="LocationName" :label="$t('iot.pointName')"/>
              <el-table-column prop="Duration" :label="$t('wms.timPeriod')"/>
              <el-table-column prop="DataStatus" :label="$t('wms.firstStatus')"
                               :filters="[{ text: '正常', value: '正常' },   { text: '异常', value: '异常' }]"
                               :filter-method="filterTag"
                               column-key="DataStatus" :filter-multiple="false" filter-placement="bottom-end">
                <template #default="scope">
                  <el-tag effect="dark"
                          :type="scope.row.DataStatus=='正常'? 'success': 'danger'"
                          size="large"
                          style="width:80px">
                    {{ scope.row.DataStatus }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="Qty" :label="$t('iot.count')">
                <template #default="scope">
                  <el-tag style="width: 80px;padding: 5px;font-size: 16px;font-weight: 600">{{ scope.row.Qty }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-container>
    </el-container>
  </fullScreenContainer>

</template>

<script setup>
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import { provide, reactive, ref, onMounted, defineEmits, watch } from 'vue'
import ScaleBox from 'vue3-scale-box'
import useI18n from '@/hooks/language'
import config from '@/config'
import titleHeader from '@/components/iot/iotRealTime/titleHeader.vue'
import { getRealTimeProductData, getRealTimeProductDataDetail } from '@/api/mesApi'

const { t } = useI18n()

// 定义变量
const data = reactive({
  ready: false,
  titleDate: [],
  period: [], // 周期
  tablesList: [],
  tablesList2: [],
  currentPage: 1,
  pageSize: 20,
  total: 0,
  currentPage2: 1,
  pageSize2: 20,
  total2: 0,
  text2: '',
  processCode: '',
  productionLineCode: '',
  locationCode: '',
  status: 'all'
})
// 表格绑定的样式
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

onMounted(async () => {
  data.ready = true
  data.text2 = times()
  table()
  setTime()
  setTime2()
})

const times = () => {
  // 获取当前时间
  var current = new Date()
  current.setTime(current.getTime() - (60 * 60 * 1000 * 5))
  var formatted = current.toISOString().replace(/T/, ' ').replace(/\..+/, '')
  return formatted
}

const setTime = () => {
  setInterval(async () => {
    data.text2 = times()
  }, 10)
}

const setTime2 = () => {
  setInterval(async () => {
    table()
  }, 6000)
}

// 表格获取数据
const table = () => {
  getRealTimeProductData({ CurrentDate: data.text2 }).then(res => {
    if (res.Status === 200) {
      data.tablesList = res.lstRealTimeData
      data.total = data.tablesList?.length
    } else {
      data.tablesList = []
      data.total = 0
    }
  })
}
const table2 = () => {
  getRealTimeProductDataDetail({
    CurrentDate: data.text2,
    ProcessCode: data.processCode,
    ProductionLineCode: data.productionLineCode,
    LocationCode: data.locationCode,
    Status: data.status
  }).then(res => {
    if (res.Status === 200) {
      data.tablesList2 = res.LstDataDetail
      data.total2 = data.tablesList2?.length || 0
    } else {
      data.tablesList2 = []
      data.total2 = 0
    }
  })
}
// 表头过滤
const filterTag = (value, row, column) => {
  console.log(value)
  data.status = value === '正常' ? 'OK' : value === '异常' ? 'NG' : 'all'
  return row.DataStatus === value
}
// 第一个表格点击出现第二个表格数据
const handlRowClick = (row) => {
  // console.log(row)
  data.processCode = row.ProcessCode
  data.productionLineCode = row.ProductionLineCode
  data.locationCode = row.LocationCode
  // data.status = row.DataStatus === '正常' ? 'OK' : row.DataStatus === '异常' ? 'NG' : 'all'
  table2()
}

</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}

* {
  margin: 0;
  padding: 0;
}
</style>
